<template>
  <div class="hours-box">
    <px-scrollbar ref="scrollbarRef" class="hours-box-views" @scroll="handleScroll">
      <div class="hours-box-scroll">
        <px-row class="hours-box-time">
          <px-col
            v-for="(item, index) in houtrs.slice(0, 12)"
            :key="index"
            :span="2"
            :class="['hours-box-time-item', noStripe ? '' : 'stripe'].join(' ')"
          >
            <span class="fxTime">{{ index === 0 && isToday ? "现在" : item }}</span>
          </px-col>
        </px-row>
        <px-row class="hours-box-time">
          <px-col
            v-for="(item, index) in houtrs.slice(12, 24)"
            :key="`${index + 12}`"
            :span="2"
            :class="['hours-box-time-item', noStripe ? '' : 'stripe'].join(' ')"
          >
            <span>{{ item }}</span>
          </px-col>
        </px-row>
        <div class="hours-box-detail">
          <slot />
        </div>
      </div>
    </px-scrollbar>
    <div class="hours-box-btn">
      <px-tooltip v-if="isStart" effect="dark" content="下一页">
        <div class="icon-box" @click="toEnd">
          <px-icon><ArrowRight /></px-icon>
        </div>
      </px-tooltip>
      <px-tooltip v-if="!isStart" effect="dark" content="上一页">
        <div class="icon-box" @click="toStart">
          <px-icon><ArrowLeft /></px-icon>
        </div>
      </px-tooltip>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect, computed } from "vue";
import dayjs from "dayjs";
const props = defineProps(["dateTime", "data", "noStripe"]);
const houtrs = ref([]);
const isStart = ref(true);
const scrollbarRef = ref();
const isToday = computed(() => {
  return props.dateTime === dayjs().format("YYYY-MM-DD");
});
const setNext24HoursArray = () => {
  const hoursArray = [];
  const now = isToday.value ? new Date() : new Date(`${props.dateTime} 00:00:00`); // 获取当前时间
  for (let i = 0; i < 24; i++) {
    let date = new Date(now);
    date.setHours(now.getHours() + i); // 设置为未来的i小时
    const time = dayjs(date).format("HH:00");
    // 根据需要调整格式化方式
    hoursArray.push(time); // 保存时间
  }
  houtrs.value = hoursArray;
};
const toStart = () => {
  isStart.value = true;
  scrollbarRef.value!.setScrollLeft(0);
};
const toEnd = () => {
  isStart.value = false;
  const offsetWidth = scrollbarRef.value?.wrapRef?.offsetWidth;
  scrollbarRef.value!.setScrollLeft(offsetWidth);
};
const handleScroll = ({ scrollLeft }) => {
  const offsetWidth = scrollbarRef.value?.wrapRef?.offsetWidth;
  if (scrollLeft < offsetWidth / 2) {
    isStart.value = true;
  } else {
    isStart.value = false;
  }
};
watchEffect(() => {
  if (props.data && props.data.length > 0) {
    houtrs.value = props.data;
  } else {
    setNext24HoursArray();
  }
});
</script>
<style lang="scss" scope>
.hours-box {
  display: flex;
  align-items: center;

  .stripe:nth-child(even) {
    background: #f8fbff;
  }

  .hours-box-views {
    flex-grow: 1;
  }

  .hours-box-scroll {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
  }

  .hours-box-time {
    flex-shrink: 0;
    flex-wrap: nowrap;
    width: 100%;
  }

  .hours-box-time-item {
    height: 158px;
    padding-top: 4px;
    text-align: center;
  }

  .fxTime {
    line-height: 20px;
    color: #000;
  }

  .hours-box-btn {
    flex-shrink: 0;
  }

  .icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 16px;
    cursor: pointer;
    background: rgb(240 242 245 / 60%);
    border-radius: 2px;
  }

  .hours-box-detail {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 120px;
  }
}
</style>
